<template>
    <div>
      <el-page-header class="header_page" @back="goBack" content="邮件内容"></el-page-header>
      <div class="content" v-html="mailInfo">

      </div>
    </div>
</template>

<script>
  import * as commonApi from "api/common";

  export default {
    name: "mailDetail",
    data() {
      return {
        invoiceMailId: '',
        mailInfo: '', //邮件内容
      }
    },

    mounted() {
      let invoiceMailId = this.$route.params.invoiceMailId
      if (invoiceMailId === undefined || invoiceMailId === ''){
          this.$router.back(-1)
          return
      } else {
        this.invoiceMailId = invoiceMailId
        this.findInvoiceMail(invoiceMailId)
      }
      console.log('----------mailDetail mounted-------------')
    },
    destroyed() {
      console.log('----------mailDetail destroyed-------------')
    },
    methods: {
      goBack() {
        this.$router.go(-1);//返回上一层
      },
      findInvoiceMail(id){ //查询发票邮件详情
        const params = {invoiceMailId: id}
        commonApi.findInvoiceMail(params).then(res => {
          let {data} = res;
          if (data.status === 200) {
            let mailH = data.data.mailHtml
            if (mailH != null && mailH != undefined){
              this.mailInfo = data.data.mailHtml
            } else {
              this.mailInfo = "暂无邮件内容"
            }
          }
        }).catch(() => {
          this.$msg({text: '查询异常', type: 'error'})
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "../../assets/css/them";
  @media screen and (max-width: 1600px){
    .header_page{
      padding: 15px 20px 15px 20px;
      background: $globalColor;
      position: fixed;
      margin-top: -10px;
      border-radius: 20px;
      z-index: 99;
      width: calc(100% - 210px);
      /deep/ .el-page-header__content{
        font-size: 14px;
        color: #303133;
        font-weight: bold;
      }
    }
    .content{
      padding-top: 35px;
      margin: 10px;
      text-align: center;
    }
  }
  @media screen and (min-width: 1600px){
    .header_page{
      padding: 15px 20px 15px 20px;
      background: $globalColor;
      position: fixed;
      margin-top: -10px;
      border-radius: 20px;
      z-index: 99;
      width: calc(100% - 290px);
      /deep/ .el-page-header__content{
        font-size: 14px;
        color: #303133;
        font-weight: bold;
      }
    }
    .content{
      padding-top: 35px;
      margin: 10px;
      text-align: center;
    }
  }

</style>
